<template>
  <div>
    <p class="title">广播详情</p>
    <div class="contain">
      <div class="box1">
        <p>
          <span class="label">广播名称：</span>
          <span>{{info.broName}}</span>
        </p>
        <p>
          <span class="label">类型：</span>
          <span>{{info.btName}}</span>
        </p>
        <p>
          <span class="label">广播封面：</span>
          <img :src="info.cover" alt="" />
        </p>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 简介目录 -->
        <el-tab-pane label="简介" name="first">
          <div v-html="info.intro"></div>
        </el-tab-pane>
        <!-- 目录选项 -->
        <el-tab-pane label="目录" name="second">
          <div class="mumebox" v-for="(item,index) in catalogueList" :key="item.catId">
            <div class="mumebox1">
              <span>{{index+1}}、</span>
              <span>{{item.catName}}</span>
              <span>作者：{{item.author}}</span>
            </div>
            <div class="mumebox2">
              <p>
                <span>播放量：</span>
                <span>{{item.playVolume}}</span>
              </p>
              <p>
                <span>时长：</span>
                <span>{{item.duration}}</span>
              </p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import apis from "@/apis/modules/radio";
  export default {
    data() {
      return {
        broId: "",//广播id
        info: {},//广播详情
        catalogueList: [],//目录列表
        activeName: "first",
      };
    },
    mounted() {
      this.broId = this.$route.query.broId;
      this.showBroadcast()
    },
    methods: {
      // 查询广播详情
      async showBroadcast() {

        const { code, data, msg } = await apis.showBroadcast({
          broId: this.broId
        })
        if (code == 200) {
          this.info = data
        }
      },
      // 获取目录
      async getCatalogue() {
        const { code, data, msg } = await apis.getCatalogue({
          broId: this.broId
        })
        if (code == 200) {
          this.catalogueList = data;
        }
      },
      //tab切换
      handleClick(tab) {
        if (tab.index == 0) {
          this.showBroadcast()
        } else if (tab.index == 1) {
          this.getCatalogue()
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .title {
    margin-bottom: 32px;
  }

  .box1 {
    font-size: 15px;

    p {
      margin-bottom: 50px;

      .label {
        font-weight: 800;
        display: inline-block;
        width: 100px;
        text-align: right;
      }

      img {
        width: 320px;
        height: 220px;

        vertical-align: top;
      }
    }
  }

  .jieshao {
    height: 200px;

  }

  .el-tabs {
    padding-left: 40px;
  }

  .mumebox {
    padding: 16px 0;
    border-bottom: 1px solid rgb(231, 226, 226);
  }

  .mumebox1 {
    font-size: 13px;
    font-weight: 800;

    span {
      margin-right: 20px;
    }
  }

  .mumebox2 {
    margin-top: 16px;
    display: flex;
    font-size: 12px;
    margin-left: 40px;

    p {
      padding-right: 20px;

    }
  }
</style>